import { ref, watch } from "vue";

// 用jsx封装组件时， 实现双向数据绑定
export function useModel(getter, emitter) {
  const state = ref(getter());

  // 监听数据变化
  watch(getter, (val) => {
    if (val !== state.value) {
      state.value = val;
    }
  });

  return {
    get value() {
      return state.value;
    },
    set value(val) {
      if (state.value !== val) {
        state.value = val;
        emitter(val); // 发送更新事件，让表单model更新
      }
    },
  };
}
